import React from 'react';
import DinoGame from './DinoGame';

const LoadingSpinner = ({ message = "加载中...", useGame = false }) => {
  if (useGame) {
    return <DinoGame message={message} />;
  }

  return (
    <div style={{ 
      display: 'flex', 
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '40px 20px'
    }}>
      <div style={{ 
        width: '50px', 
        height: '50px', 
        border: '5px solid #f3f3f3',
        borderTop: '5px solid #2196F3',
        borderRadius: '50%',
        animation: 'spin 1s linear infinite',
        marginBottom: '20px'
      }}></div>
      <p style={{ 
        fontSize: '18px',
        color: '#666',
        textAlign: 'center'
      }}>
        {message}
      </p>
      <div style={{
        marginTop: '20px',
        display: 'flex',
        gap: '10px'
      }}>
        <div style={{
          width: '10px',
          height: '10px',
          backgroundColor: '#2196F3',
          borderRadius: '50%',
          animation: 'bounce 1.5s infinite'
        }}></div>
        <div style={{
          width: '10px',
          height: '10px',
          backgroundColor: '#2196F3',
          borderRadius: '50%',
          animation: 'bounce 1.5s infinite 0.2s'
        }}></div>
        <div style={{
          width: '10px',
          height: '10px',
          backgroundColor: '#2196F3',
          borderRadius: '50%',
          animation: 'bounce 1.5s infinite 0.4s'
        }}></div>
      </div>
    </div>
  );
};

export default LoadingSpinner;